<template>
	<view style="overflow: hidden;height: 100%;">
		<view style="height: 100px;line-height: 135px;text-align: center;font-size: 14px;font-weight: bold;">
			信息登记
		</view>
		<view class="container">
			<view class="form-container">
				<view class="form-group">
					<view class="label">姓名</view>
					<input type="text" class="input" placeholder="请输入姓名" v-model="formData.name" />
				</view>

				<view class="form-group">
					<view class="label">性别</view>
					<view class="radio-group">
						<view @click="setSex(1)"
							:class="['default-box', formData.gender == 1 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							男
						</view>
						<view @click="setSex(0)"
							:class="['default-box', formData.gender == 0 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							女
						</view>
					</view>
				</view>
				<view class="form-group">
					<view class="label">民族</view>
					<input type="text" class="input" placeholder="请输入民族" v-model="formData.nationality" />
				</view>
				<view class="form-group">
					<view class="label">身高</view>
					<input type="text" class="input" placeholder="请输入身高" v-model="formData.height" />

				</view>
				<view class="form-group">
					<view class="label">体重</view>
					<input type="text" class="input" placeholder="请输入体重" v-model="formData.weight" />

				</view>

				<view class="form-group">
					<view class="label">所学专业</view>
					<input type="text" class="input" placeholder="请输入专业" v-model="formData.subjectName" />
				</view>

				<view class="form-group">
					<view class="label">微信号</view>
					<input type="text" class="input" placeholder="请输入微信号" v-model="formData.wxNumber" />
				</view>
				<view class="form-group">
					<view class="label">籍贯</view>
					<picker mode="region" :value="nativePlace" @change="handleCityChange">
						<view class="picker">
							{{ nativePlace.length > 0 ? nativePlace.join(' ') : '请选择城市' }}
						</view>
					</picker>
				</view>

				<view class="form-group">
					<view class="label">联系电话</view>
					<input type="text" class="input" placeholder="请输入联系电话" v-model="formData.mobilePhone" />
				</view>
				<view class="form-group">
					<view class="label">身份证号</view>
					<input type="tel" class="input" placeholder="请输入身份证号码" v-model="formData.idCard" />

				</view>
				<view class="form-group">
					<view class="label">毕业院校</view>
					<input type="text" class="input" placeholder="请输入毕业院校" v-model="formData.graduateSchool" />
				</view>
			</view>

			<view class="form-container">
				<view class="form-group">
					<view class="label" style="width: 55%;">全日制最高学历</view>
					<picker style="border: unset;width: 40%;" :range="qualificationOptions" :value="qualificationIndex" :range-key="'name'"
						@change="handleEducationChange">
						<view class="picker">
							{{ qualificationOptions[qualificationIndex].name || "请选择学历" }}
						</view>
					</picker>
					<view class="error-message" v-if="errors.education">{{
						errors.education
					}}</view>
				</view>
				<view class="form-group">
					<view class="label" style="width: 55%;">最高全日制学历毕业时间</view>
					<picker style="width: 40% !important;" mode="date" :value="graduateYear" start="1900-01-01"
						end="2025-12-31" @change="handleGraduationDateChange">
						<view class="picker">
							{{ graduateYear || "请选择毕业时间" }}
						</view>
					</picker>
				</view>
			</view>

			<view class="form-container">
				<h4 style="margin-bottom: 10px;font-weight: bold;">紧急联系人</h4>
				<view v-for="(item, index) in emergencyContacts" :key="index">
					<view class="form-group">
						<view class="label">名称</view>
						<input type="text" style="margin-bottom: 10rpx;" class="input" placeholder="请输入紧急联系人名称"
							v-model="item.name" />
					</view>
					<view class="form-group">
						<view class="label">关系</view>
						<input type="text" style="margin-bottom: 10rpx;" class="input" placeholder="请输入紧急联系人关系"
							v-model="item.title" />
					</view>
					<view class="form-group">
						<view class="label">电话</view>
						<input type="text" class="input" placeholder="请输入紧急联系人联系电话" v-model="item.major" />
					</view>
				</view>

			</view>

			<view class="form-container">
				<view class="form-group">
					<view class="label" style="width: 45%;">是否有残疾</view>
					<view class="radio-group">
						<view @click="setIsDisability(1)"
							:class="['default-box', formData.isDisability == 1 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							是
						</view>
						<view @click="setIsDisability(0)"
							:class="['default-box', formData.isDisability == 0 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							否
						</view>
					</view>
				</view>

				<view class="form-group">
					<view class="label" style="width: 45%;">是否有传染性疾病</view>
					<view class="radio-group">
						<view @click="setIsInfectiousDiseases(1)"
							:class="['default-box', formData.isInfectiousDiseases == 1 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							是
						</view>
						<view @click="setIsInfectiousDiseases(0)"
							:class="['default-box', formData.isInfectiousDiseases == 0 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							否
						</view>
					</view>
				</view>

				<view class="form-group">
					<view class="label" style="width: 45%;">婚姻状态</view>
					<view class="radio-group">
						<view @click="setIsMarryed(1)"
							:class="['default-box', formData.isMarryed == 1 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							已婚
						</view>
						<view @click="setIsMarryed(0)"
							:class="['default-box', formData.isMarryed == 0 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							未婚
						</view>
					</view>
					<view class="error-message" v-if="errors.gender">{{
						errors.gender
					}}</view>
				</view>

				<view class="form-group">
					<view class="label" style="width: 45%;">是否有视听障碍</view>
					<view class="radio-group">
						<view @click="setIsAudioVisual(1)"
							:class="['default-box', formData.isAudioVisual == 1 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							是
						</view>
						<view @click="setIsAudioVisual(0)"
							:class="['default-box', formData.isAudioVisual == 0 ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							否
						</view>
					</view>
				</view>
				<view class="form-group">
					<view class="label" style="width: 45%;">是否有以下病史</view>
					<view class="radio-group">
						<view @click="setHasMoreDisease('3')"
							:class="['default-box', formData.hasMoreDisease == '3' ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							是
						</view>
						<view @click="setHasMoreDisease('0')"
							:class="['default-box', formData.hasMoreDisease == '0' ? 'active-default-box' : '']"
							style="margin-right: 4px;">
							否
						</view>
					</view>
				</view>
			</view>

			<view class="form-container">
				<view>
					<view class="label" style="font-weight: bold;">身份证上传</view>

					<view class="card-container">
						<view class="card-item">
							<view class="upload-area" @click="chooseImage(1)">
								<image v-if="formData.idCardFront" :src="formData.idCardFront" mode="aspectFill"
									class="preview-image">
								</image>
								<view v-else class="upload-placeholder">
									<text class="upload-text">点击上传</text>
									<text class="upload-hint">请上传身份证正面照</text>
								</view>
							</view>
							<text v-if="formData.idCardFront" class="delete-btn" @click="deleteImage(1)">删除</text>
						</view>

						<view class="card-item">
							<view class="upload-area" @click="chooseImage(2)">
								<image v-if="formData.idCardBack" :src="formData.idCardBack" mode="aspectFill"
									class="preview-image">
								</image>
								<view v-else class="upload-placeholder">
									<text class="upload-text">点击上传</text>
									<text class="upload-hint">请上传身份证反面照</text>
								</view>
							</view>
							<text v-if="formData.idCardBack" class="delete-btn" @click="deleteImage(2)">删除</text>
						</view>
					</view>

					<view class="tips">
						<text class="tips-title">上传须知：</text>
						<text>1. 请确保照片清晰，无遮挡</text>
						<text>2. 光线充足，避免反光</text>
						<text>3. 请上传真实有效的身份证照片</text>
					</view>
				</view>
				<view>
					<view class="label" style="font-weight: bold;">学历证明</view>
					<uni-file-picker @select="onSelect" @success="uploadSuccess" limit="9"
						title="最多选择9张图片"></uni-file-picker>
				</view>
			</view>

			<view class="button-group">
				<button class="btn reset-btn" @click="resetForm">重置</button>
				<button class="btn submit-btn" @click="submitForm">提交</button>
			</view>
		</view>

	</view>
</template>

<script>
	import ImageUpload from '@/components/ImageUpload.vue';
	import {
		ossUploadRecord,saveRegister
	} from '../api/index.js'
	export default {
		components: {
			ImageUpload,
		},
		data() {
			return {
				pageTitle: '登记信息',
				uploadUrl: 'https://your-api-domain.com/upload',
				imageUrls: [],
				uploadTask: null,
				uploadProgress: 0,
				emergencyContacts: [{}, {}],
				nativePlace: [],
				qualificationIndex: null,
				graduateYear: null,
				eduationIdentifyPic: [],
				formData: {
					name: "",
					gender: "",
					nativePlace: '',
					nationality: '',
					isMarryed: 0,
					height: "",
					weight: "",
					idCard: "",
					qualification: "",
					subjectName: '',
					graduateSchool: "",
					mobilePhone: '',
					wxNumber: "",
					isDisability: 0,
					isAudioVisual: 0,
					hasMoreDisease: '0',
					isInfectiousDiseases: 0,
					idCardFront: "",
					idCardBack: "",
					eduPic: "",
					token: "",
					emergencyContacts: [],
				},
				qualificationOptions: [{
						value: 13,
						name: '大专（自考/成考/函授）'
					},
					{
						value: 14,
						name: '本科（自考/成考/函授）'
					},
					{
						value: 15,
						name: '大专（全日制）'
					},
					{
						value: 16,
						name: '本科（全日制）'
					},
					{
						value: 19,
						name: '硕士'
					},
					{
						value: 10,
						name: '其他'
					},
				],
				educationIndex: 0,
				errors: {},
				selectedDate: "",
			};
		},
		methods: {
			// 设置性别
			setSex(val) {
				this.formData.gender = val
			},
			setIsDisability(val) {
				this.formData.isDisability = val
			},
			setIsInfectiousDiseases(val) {
				this.formData.isInfectiousDiseases = val
			},
			setIsMarryed(val) {
				this.formData.isMarryed = val
			},
			setIsAudioVisual(val) {
				this.formData.isAudioVisual = val
			},
			setHasMoreDisease(val) {
				this.formData.hasMoreDisease = String(val)
			},
			// 设置籍贯
			handleCityChange(e) {
				this.nativePlace = e.detail.value;
				this.formData.nativePlace = this.nativePlace.join(',')
			},
			// 设置学历
			handleEducationChange(e) {
				this.qualificationIndex = e.detail.value;
				this.formData.qualification = this.qualificationOptions[this.qualificationIndex].value
			},

			onImageChange(imageList) {
				this.imageUrls = imageList;
				console.log('当前图片列表:', this.imageUrls);
			},
			generateFileName(filePath) {
			  const timestamp = Date.now();
			  const extname = filePath.split('.').pop() || 'jpg'; // 默认jpg扩展名
			  return `${timestamp}.${extname}`;
			},
			chooseImage(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						console.log('选择图片成功', res.tempFiles[0]);
						let fileObj = res.tempFiles[0]
						fileObj.name = this.generateFileName(fileObj.path)
						if (type === 1) {
							this.uploadFile(fileObj, 1)
						} else if (type === 2) {
							this.uploadFile(fileObj, 2)
						}
					},
					fail: (err) => {
						console.error('选择图片失败', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},

			// 删除已选图片
			deleteImage(type) {
				if (type === 'front') {
					this.formData.idCardFront = '';
				} else {
					this.formData.idCardBack = '';
				}
			},
			// 设置毕业时间
			handleGraduationDateChange(e) {
				this.graduateYear = e.detail.value;
				this.formData.graduateDate = this.graduateYear ? Number(this.graduateYear.substr(0, 4)) : 0
			},

			selectRegistrationTime() {
				const now = new Date();
				this.selectedDate = this.formatDate(now);

				// 显示日期选择器
				uni.showActionSheet({
					itemList: this.generateDateOptions(now),
					success: (res) => {
						const selectedIndex = res.tapIndex;
						if (selectedIndex === 0) {
							// 今天
							this.selectedDate = this.formatDate(now);
						} else if (selectedIndex === 1) {
							// 明天
							const tomorrow = new Date(now.getTime() + 24 * 60 * 60 * 1000);
							this.selectedDate = this.formatDate(tomorrow);
						}

						// 显示时间选择器
						this.showTimePicker();
					},
					fail: (err) => {
						console.log(err.errMsg);
					},
				});
			},

			formatDate(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month.toString().padStart(2, "0")}-${day
				.toString()
				.padStart(2, "0")}`;
			},

			generateDateOptions(now) {
				const options = ["今天", "明天"];
				return options;
			},

			showTimePicker() {
				const now = new Date();
				const isToday = this.selectedDate === this.formatDate(now);
				const currentHour = now.getHours();

				// 生成时间选项
				let hours = [];
				if (isToday) {
					// 今天只显示当前时间及之后的小时
					for (let i = currentHour; i < 24; i++) {
						hours.push(i.toString().padStart(2, "0"));
					}
				} else {
					// 明天显示所有小时
					for (let i = 0; i < 24; i++) {
						hours.push(i.toString().padStart(2, "0"));
					}
				}

				// 显示小时选择器
				uni.showActionSheet({
					itemList: hours.map((hour) => `${hour}:00`),
					success: (res) => {
						this.selectedHour = hours[res.tapIndex];
						this.formData.registrationTime = `${this.selectedDate} ${this.selectedHour}:00`;
						this.validateField(
							"registrationTime",
							this.formData.registrationTime
						);
					},
					fail: (err) => {
						console.log(err.errMsg);
					},
				});
			},
			validateField(field, value) {
				// 清除之前的错误
				if (this.errors[field]) {
					delete this.errors[field];
				}

				// 根据字段进行不同的验证
				switch (field) {
					case "name":
						if (!value.trim()) {
							this.errors[field] = "请输入姓名";
						} else if (value.length > 20) {
							this.errors[field] = "姓名长度不能超过20个字符";
						}
						break;

					case "gender":
						if (!value) {
							this.errors[field] = "请选择性别";
						}
						break;

					case "birthday":
						if (!value) {
							this.errors[field] = "请选择出生年月";
						}
						break;

					case "phone":
						if (!value) {
							this.errors[field] = "请输入电话号码";
						} else {
							const phoneReg = /^1[3-9]\d{9}$/;
							if (!phoneReg.test(value)) {
								this.errors[field] = "请输入有效的手机号码";
							}
						}
						break;

					case "education":
						if (!value) {
							this.errors[field] = "请选择学历";
						}
						break;

					case "graduationDate":
						if (!value) {
							this.errors[field] = "请选择毕业时间";
						} else if (new Date(value) > new Date()) {
							this.errors[field] = "毕业时间不能晚于当前日期";
						}
						break;

					case "major":
						if (!value.trim()) {
							this.errors[field] = "请输入专业";
						} else if (value.length > 50) {
							this.errors[field] = "专业名称长度不能超过50个字符";
						}
						break;

					case "occupation":
						if (!value.trim()) {
							this.errors[field] = "请输入职业";
						} else if (value.length > 30) {
							this.errors[field] = "职业名称长度不能超过30个字符";
						}
						break;

					case "city":
						if (value.length === 0) {
							this.errors[field] = "请选择城市";
						}
						break;

					case "remark":
						if (value.length > 500) {
							this.errors[field] = "备注信息长度不能超过500个字符";
						}
						break;
				}
			},
			validateForm() {
				// 对所有字段进行验证
				for (const field in this.formData) {
					this.validateField(field, this.formData[field]);
				}

				// 返回是否有错误
				return Object.keys(this.errors).length === 0;
			},







			// 处理多张图片上传
			onSelect(e) {
				console.log(e.tempFiles[0])
				this.uploadFile(e.tempFiles[0], 3)

			},
			async uploadFile(file, type) {
				const timestampInSeconds = new Date().getTime();
				const ossObject = JSON.parse(uni.getStorageSync('ossInfo'))
				const uploadResult = uni.uploadFile({
					url: ossObject.host,
					filePath: file.url ? file.url : file.path,
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data',
						'x-oss-security-token': ossObject.security_token // STS Token
					},
					formData: {
						'success_action_status': '200',
						'policy': ossObject.policy, // 如果使用Policy签名模式，此处需填入后端生成的Policy
						'x-oss-signature': ossObject.signature,
						'x-oss-signature-version': 'OSS4-HMAC-SHA256',
						'x-oss-credential': ossObject.x_oss_credential,
						'x-oss-date': ossObject.x_oss_date,
						'key': ossObject.dir + timestampInSeconds + file.name,
						'x-oss-security-token': ossObject.security_token,
					},
					success: (res) => {
						const fileName = file.name ? file.name : file.path
						let imgUrl =
							"https://www.nlpy.cn/oss" +
							"/" +
							ossObject.dir +
							timestampInSeconds +
							fileName;
						if (type == 3) {
							this.eduationIdentifyPic.push({
								name: file.name,
								url: imgUrl,
							});
						} else if (type == 2) {
							this.formData.idCardBack = imgUrl
						} else if (type == 1) {
							this.formData.idCardFront = imgUrl
						}

					},
					fail: (error) => {
						uni.showToast({
							title: '上传失败',
							icon: 'error'
						})
					}
				})
			},
			buildQueryString(params) {
				const queryArray = [];
				for (const [key, value] of Object.entries(params)) {
					// 处理数组类型的属性
					if (Array.isArray(value)) {
						value.forEach((item, index) => {
							queryArray.push(
								`${encodeURIComponent(key)}=${encodeURIComponent(item)}`
							);
						});
					}
					// 处理普通类型的属性
					else {
						queryArray.push(
							`${encodeURIComponent(key)}=${encodeURIComponent(value)}`
						);
					}
				}

				return queryArray.join('&');
			},
			async uploadMutiple(uuid) {
				const ossFileNames = this.eduationIdentifyPic.map((e) => {
					return e.url
				});
				const params = this.buildQueryString({
					uniFileCode: uuid,
					dictType: 'educational_prove',
					dictTypeName: '学历证明',
					ossFileNames: ossFileNames
				})
				await ossUploadRecord(params).then((res) => {
					console.log("res", res);
				});
			},
			generateUUID() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					const r = Math.random() * 16 | 0;
					const v = c === 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			submitForm() {
				// 验证表单
				const uniFileCode = this.generateUUID()
				this.formData.token = JSON.parse(uni.getStorageSync('token'))
				this.formData.uniFileCode = uniFileCode
				this.formData.emergencyContacts = this.emergencyContacts
				if (this.eduationIdentifyPic.length > 0) {
					this.uploadMutiple(uniFileCode);
				}
				saveRegister(this.formData).then(res =>{
					if(res.data.code == 200){
						uni.showToast({
							title: "提交成功",
							icon: "success",
						});
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: "error",
						});
					}
				})
				

			},
		},
	};
</script>

<style>
	.container {
		padding: 10px;
		background-color: #f5f5f5;
		height: 80vh;
		overflow-y: auto;
	}

	.form-container {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
	}

	.form-title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30px;
		color: #333;
	}

	.form-group {
		min-height: 36px;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 5px;
		border-bottom: 1px solid #eaeaea;
	}

	.label {
		font-size: 16px;
		color: #333;
		font-weight: 500;
		width: 30%;
	}

	.input {
		flex: 1;
		height: 40px;
		border: unset;
		padding: 0 5px;
		border-radius: 5px;
		padding: 0 10px;
		font-size: 14px;
		color: #333;
		text-align: right;
	}

	.w-90 {
		width: 90% !important;
	}

	.radio-group {
		display: flex;
		flex-wrap: wrap;
	}

	.radio-item {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.select-time-btn {
		margin-top: 10px;
		padding: 8px 15px;
		background-color: #007aff;
		color: white;
		border: none;
		border-radius: 5px;
		font-size: 14px;
		cursor: pointer;
	}

	.picker {
		height: 40px;
		border: unset;
		border-radius: 5px;
		padding: 0 10px;
		font-size: 14px;
		color: #666;
		display: flex;
		align-items: center;
	}

	.textarea {
		width: 100%;
		min-height: 100px;
		border: 1px solid #ddd;
		border-radius: 5px;
		padding: 10px;
		font-size: 14px;
		color: #333;
		resize: none;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.btn {
		width: 48%;
		height: 45px;
		border-radius: 5px;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
	}

	.reset-btn {
		background-color: #f5f5f5;
		color: #666;
		border: 1px solid #ddd;
	}

	.submit-btn {
		background-color: #007aff;
		color: #fff;
		border: none;
	}

	.error-message {
		color: #f56c6c;
		font-size: 12px;
		margin-top: 5px;
	}

	/* 错误状态的输入框样式 */
	.input.error,
	.picker.error,
	.textarea.error {
		border-color: #f56c6c;
	}


	.title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		color: #333;
	}

	.card-container {
		padding: 20rpx;
	}

	.card-item {
		margin-bottom: 40rpx;
	}

	.card-label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
	}

	.upload-area {
		width: 100%;
		height: 400rpx;
		border: 2rpx dashed #ddd;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f9f9f9;
		position: relative;
		overflow: hidden;
	}

	.preview-image {
		width: 100%;
		height: 100%;
	}

	.upload-placeholder {
		text-align: center;
	}

	.upload-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 10rpx;
	}

	.upload-hint {
		font-size: 24rpx;
		color: #bbb;
	}

	.delete-btn {
		display: block;
		text-align: center;
		color: #ff4500;
		font-size: 26rpx;
		margin-top: 15rpx;
	}

	.tips {
		padding: 20rpx;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		margin-bottom: 40rpx;
	}

	.tips-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.tips text {
		display: block;
		font-size: 24rpx;
		color: #666;
		line-height: 1.8;
	}

	/* .submit-btn {
  width: 100%;
  height: 88rpx;
  background-color: #007aff;
  color: white;
  border-radius: 44rpx;
  font-size: 32rpx;
}

.submit-btn[disabled] {
  background-color: #cccccc;
} */

	.content {
		padding: 30rpx;
	}

	.preview-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
	}

	.preview-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.preview-item {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.preview-item image {
		width: 100%;
		height: 100%;
	}

	.default-box {
		padding: 4px 30px;
		border: 1px solid #EFEBE9;
		border-radius: 4px;
		font-size: 12px;
		color: #333;
		display: flex;
		align-items: center;

	}

	.active-default-box {
		background-color: #007aff;
		color: white;
		border: unset !important;
	}
</style>